<template>
  <div class="dl">
    <ul>
      <li v-for="(item, index) in list" :key="index">
        {{ item.number1 }} +{{ item.number2 }}
        <input type="text" v-model.number="item.val" />
        <button @click="btn(index)">提交</button>
        <span ref="oo">{{ item.id }}:{{ item.panduan }}</span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    list: Array,
    panduan: String,
    id:Number,
  },
  computed: {},
  methods: {
    btn(e) {
      const res = this.list[e].number1 + this.list[e].number2
      if (this.list[e].val === '') {
        alert('请输入数字')
      } else if (this.list[e].val == res) {
        console.log('完成')
        this.flag = 'true'
        console.log(this.flag)
      } else {
        console.log('错误')
        this.flag = 'false'
        console.log(this.flag)
      }
      // console.log(this.$refs.oo)
      if (this.flag == 'true') {
        this.$refs.oo[e].style.color = 'green'
        this.list[e].panduan = '正确'
      } else if (this.flag == 'false') {
        this.$refs.oo[e].style.color = 'red'
        this.list[e].panduan = '错误'
      }
    },
  },
  data() {
    return {
      // he: '',
      flag: '',
    }
  },
}
</script>

<style>
.dl ul li {
  list-style: none;
}
</style>
